<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="http://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    #add {

        border: 1px solid #000;
        width: 600px;
    }

    #search {
        margin: 5px 0;
        width: 595px;
        border: 1px solid #000;
        padding-left: 5px;

    }

    #app {
        width: 600px;
        margin: 10px auto;
    }

    .tb {
        border-collapse: collapse;
        width: 100%;
    }

    .tb th {
        background-color: #0094ff;
        color: white;
    }

    .tb td,
    .tb th {
        padding: 5px;
        border: 1px solid black;
        text-align: center;
    }

    .add {
        padding: 5px;
        border: 1px solid black;
        margin-bottom: 10px;
    }
</style>

<body>

    <div id="app">
        <div id="add">
            编号：<input type="text" v-model="code">
            品牌名称：<input type="text" v-model="name">
            <input type="button" value="添加" @click="add">
        </div>
        <div id="search">
            品牌名称：<input type="text" v-model="searchText" placeholder="请输入搜索条件">
        </div>
        <table class="tb">
            <tr>
                <th>编号</th>
                <th>品牌名称</th>
                <th>创立时间</th>
                <th>操作</th>
            </tr>
            <tr v-for="(item,i) in searchArr" :key="item.id">
                <td>{{item.code}}</td>
                <td>{{item.name}}</td>
                <td>{{item.time}}</td>
                <td>
                    <button @click="del(item)">删除</button>
                </td>
            </tr>
        </table>
        <div class="add" style="text-align: center;" v-show="!searchArr.length">没有更多数据了</div>
    </div>
</body>

</html>
<script>
    //需求:
    //1.列表渲染 
    //2.添加数据
    //3.非空校验
    //4.清空输入框
    //5.按下回车添加
    //6.删除
    //7.数据清空之后显示没有更多数据了

    //永久存储的两种范式
    //1.通过每个函数增加
    //2.通过watch
    var t = new Date().toLocaleTimeString()
    // console.log(t);
    const vm = new Vue({
        el: "#app", //挂载的dom（el就是vue能编译的范围）
        data: {
            code: "",
            name: "",
            searchText: "",
            arr: [{
                    id: 1,
                    code: 1,
                    name: "鸿星尔克",
                    time: t
                },
                {
                    id: 2,
                    code: 2,
                    name: "德尔惠",
                    time: t
                },
                {
                    id: 3,
                    code: 3,
                    name: "金莱克",
                    time: t
                },
                {
                    id: 4,
                    code: 4,
                    name: "贵人鸟",
                    time: t
                }
            ]
        },
        //通过计算属性来完成搜索功能
        computed: {
            searchArr() {
                //通过indexOf检索数组中每一个对象中的productName属性，再通过filter返回检索结果不为-1的选项

                return this.arr.filter(item => item.name.indexOf(this.searchText) !== -1)
            }
        },
        methods: {
            add() {
                if (this.code === "" || this.name === "") {
                    alert("输入框不能为空")
                    return
                }
                // console.log(this.code);
                // console.log(this.name);
                //随机生成id
                let obj = {
                    id: Math.random().toString(32).substr(2),
                    code: this.code,
                    name: this.name,
                    time: t
                }
                //push到数组
                this.arr.push(obj)
                //清空输入框的值
                this.code = "";
                this.name = "";
                // localStorage.setItem('qf-arr', JSON.stringify(this.arr))
            },
            del(item) {
                console.log(item);
                //通过当前数据的id删除
                //使用filter方法，返回id不等于当前item的id的对象
                this.arr = this.arr.filter(v => v.id !== item.id)
                // this.arr.splice(i,1)
                // localStorage.setItem('qf-arr', JSON.stringify(this.arr))
            },
        },
        mounted() {
            let qfArr = localStorage.getItem("qf-arr");
            qfArr = qfArr == "undefined" ? "[]" : qfArr;
            console.log(qfArr);
            this.arr = JSON.parse(qfArr)
        },
        watch: {
            "arr"(newVal,oldVal){
                console.log(newVal);
                localStorage.setItem('qf-arr',JSON.stringify(newVal))
            }
        }
    })
</script>